<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zengtudor - 个人简历</title>
    <style>
        :root {
            --bg-color: #f4f4f4;
            --card-bg-color: #ffffff;
            --text-color: #333333;
            --link-color: #007BFF;
            --link-hover-color: #0056b3;
            --divider-color: #e8e8e8;
            --progress-bg-color: #e9ecef;
            --progress-bar-color: #007BFF;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }

        .card {
            background-color: var(--card-bg-color);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 50px auto;
            max-width: 85%;
            padding: 30px;
            transition: box-shadow 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .avatar {
            border-radius: 50%;
            width: 120px;
            height: 120px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .avatar:hover {
            transform: scale(1.1);
        }

        .name-contact {
            flex-grow: 1;
            margin-left: 20px;
        }

        .name {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .position {
            font-size: 18px;
            color: #666;
            margin-bottom: 10px;
        }

        .contact {
            font-size: 16px;
            line-height: 1.6;
        }

        .contact a {
            color: var(--link-color);
            text-decoration: none;
            margin-right: 15px;
            transition: color 0.3s ease;
        }

        .contact a:hover {
            color: var(--link-hover-color);
        }

        .intro {
            font-family: 'Dancing Script', cursive;
            position: relative;
            padding-left: 20px;
            margin-bottom: 30px;
        }

        .intro::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: var(--link-color);
        }

        .section {
            margin-bottom: 30px;
            position: relative;
        }

        .section:not(:last-child)::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 0;
            right: 0;
            height: 1px;
            background-color: var(--divider-color);
        }

        .section h2 {
            font-size: 24px;
            margin-bottom: 15px;
            padding-bottom: 10px;
        }

        .timeline-item {
            margin-bottom: 20px;
        }

        .timeline-item h3 {
            font-size: 20px;
            margin-bottom: 5px;
        }

        .timeline-item p {
            margin: 0;
            line-height: 1.6;
        }

        .progress-bar {
            background-color: var(--progress-bg-color);
            border-radius: 5px;
            height: 20px;
            margin-bottom: 15px;
            position: relative;
        }

        .progress {
            background-color: var(--progress-bar-color);
            border-radius: 5px;
            height: 100%;
            text-align: left;
            padding-left: 10px;
            color: white;
            font-size: 14px;
        }

        .radar-chart {
            width: 100%;
            height: 230px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 1s ease-out;
        }

        .skills-container {
            display: flex;
            gap: 20px;
        }

        .progress-container {
            flex: 1;
        }

        .radar-container {
            flex: 1;
        }

        .footer-contact {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .footer-contact a {
            color: var(--link-color);
            font-size: 24px;
            transition: color 0.3s ease;
        }

        .footer-contact a:hover {
            color: var(--link-hover-color);
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Dancing Script&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>

<body>
    <div class="card">
        <div class="header">
            <img class="avatar" src="https://picsum.photos/200/200" alt="Zengtudor">
            <div class="name-contact">
                <div class="name">Zengtudor</div>
                <div class="position">算法竞赛与全栈开发学习者</div>
                <div class="contact">
                    <a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i> 2917946698@qq.com</a>
                    <a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i> Zengtudor@outlook.com</a>
                    <a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i> GitCode</a>
                    <a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i> 个人博客</a>
                    <a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i> 代码库</a>
                </div>
            </div>
        </div>
        <div class="intro fade-in">
            <p>我是Zengtudor，一名热爱计算机科学的高中生。专注于C++算法竞赛与全栈开发，熟悉现代C++编程范式，掌握Node.js、Vue、C#和Python等多种技术栈。对生物信息工程项目有深入研究，曾实现40倍并行加速优化。热衷于探索计算机科学的各个领域，追求技术的极致与创新。如有有偿程序开发需求，欢迎联系我。</p>
        </div>
        <div class="section fade-in">
            <h2>教育背景</h2>
            <div class="timeline-item">
                <h3>高中在读</h3>
                <p>2024 - 至今</p>
                <ul>
                    <li>参与学校科技创新社团，主导多个编程项目开发。</li>
                </ul>
            </div>
        </div>
        <div class="section fade-in">
            <h2>获奖信息</h2>
            <div class="timeline-item">
                <h3>国家级竞赛</h3>
                <ul>
                    <li>[2023] CSP-J（入门级）二等奖</li>
                    <li>[2024] CSP-S（提高级）三等奖</li>
                    <li>[2024] NOIP（全国青少年信息学奥林匹克联赛）三等奖</li>
                    <li>蓝桥杯省赛一等奖</li>
                </ul>
            </div>
            <div class="timeline-item">
                <h3>其他荣誉</h3>
                <ul>
                    <li>深圳科创明日之星称号</li>
                </ul>
            </div>
        </div>
        <div class="section fade-in">
            <h2>专业技能</h2>
            <div class="skills-container">
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress" style="width: 95%;">C++ 算法竞赛 - 95%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" style="width: 85%;">现代 C++ 编程 - 85%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" style="width: 80%;">Node.js & Vue 开发 - 80%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" style="width: 75%;">Python 与数据处理 - 75%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" style="width: 70%;">Docker 与容器化部署 - 70%</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress" style="width: 65%;">嵌入式系统开发 - 65%</div>
                    </div>
                </div>
                <div class="radar-container">
                    <canvas class="radar-chart" id="radarChart"></canvas>
                </div>
            </div>
            <script>
                const ctx = document.getElementById('radarChart').getContext('2d');
                const myRadarChart = new Chart(ctx, {
                    type: 'radar',
                    data: {
                        labels: ['C++ 算法', '现代 C++', 'Web 开发', '数据处理', '系统部署', '嵌入式开发'],
                        datasets: [{
                            label: '技能水平',
                            data: [95, 85, 80, 75, 70, 65],
                            backgroundColor: 'rgba(0, 123, 255, 0.2)',
                            borderColor: 'rgba(0, 123, 255, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            r: {
                                min: 0,
                                max: 100
                            }
                        }
                    }
                });
            </script>
        </div>
        <div class="section fade-in">
            <h2>项目经验</h2>
            <div class="timeline-item">
                <h3>生物信息工程项目优化</h3>
                <p>2023 - 2024</p>
                <ul>
                    <li>对生物信息学序列比对算法进行并行优化，通过多线程和向量化技术实现了40倍的性能提升。</li>
                    <li>使用现代C++（C++17/20）重构原有代码，引入智能指针、并行算法和协程等特性，提高代码质量和可维护性。</li>
                    <li>开发了自动化测试框架，确保优化后的代码保持正确性和稳定性。</li>
                </ul>
            </div>
            <div class="timeline-item">
                <h3>基于C++与webview的数据驱动框架桌面程序</h3>
                <p>2024</p>
                <ul>
                    <li>使用C++结合WebView技术开发跨平台桌面应用框架，实现数据模型与界面的双向绑定。</li>
                    <li>设计模块化架构，支持插件式功能扩展，提升系统灵活性和可维护性。</li>
                </ul>
            </div>
            <div class="timeline-item">
                <h3>为《笔顺码字典》使用Vue的数据驱动与SSR渲染开发信息化查询平台</h3>
                <p>2024</p>
                <ul>
                    <li>采用Vue.js构建数据驱动的前端应用，实现组件化开发和状态管理。</li>
                    <li>集成SSR（服务器端渲染）技术，提升页面加载速度和搜索引擎优化效果。</li>
                </ul>
            </div>
            <div class="timeline-item">
                <h3>大模型本地部署与向量知识库联动与工作流程序开发</h3>
                <p>2024</p>
                <ul>
                    <li>在本地环境部署开源大语言模型，结合FAISS实现向量知识库的高效检索与联动。</li>
                    <li>设计自动化工作流程序，实现数据预处理、模型推理到结果输出的全流程管理。</li>
                </ul>
            </div>
        </div>
        <div class="footer-contact">
            <a href="mailto:2917946698@qq.com"><i class="fa-solid fa-envelope"></i></a>
            <a href="mailto:Zengtudor@outlook.com"><i class="fa-solid fa-envelope"></i></a>
            <a href="https://gitcode.com/Zengtudor"><i class="fa-brands fa-github"></i></a>
            <a href="https://blog.zziyu.cn/"><i class="fa-brands fa-blogger"></i></a>
            <a href="https://git.zziyu.cn/"><i class="fa-brands fa-gitlab"></i></a>
        </div>
    </div>
</body>

</html>    